<style scoped lang="scss">
.left {
    overflow-y: scroll;
    width: 100px;
    background: #f4f4f4;
    .left-item {
        text-align: center;
        align-items: center;
        width: 100px;
        height: 50px;
        line-height: 50px;
       border-left: 4px solid #f4f4f4;
        &.active {
            border-left: 4px solid #3087ea;
            background: #fff
        }
    }
}
.right {
    overflow-y: scroll;
    flex: 1;

    .span1 {
        display: flex;
        flex-wrap: wrap;
        .span {
            width: 50%;
            line-height: 80px;
            text-align: center;
        }
        dl {
            width: 33.3%;
            text-align: center;
            dt{
                img{
                    width: 100px;
                    height: 90px;
                }
            }
            dd{
                line-height: 30px;
                span{
                    font-size: 12px
                }
            }
        }
    }
}
</style>
<template>
    <div>
        <homeTop :userimg="true" :showSearch="false"></homeTop>
        <van-tabs v-model:active="active">
            <van-tab title="常见病症">
                <div style="display: flex;height: 500px;">
                    <div class="left">
                        <div class="left-item" v-for="(item, index) in TabsData" :key="index"
                            :class="activeIndex == index ? 'active' : ''" @click="ongetgord((item as any).id, index)"
                            @change="activeIndex = index">
                            {{ item.departmentName  }}
                        </div>
                    </div>
                    <div class="right">
                        <span class="span1">
                            <template v-for="(item, index) in TabData" :key="index">
                                <span @click="ondetail(item.id,item.name)" class="span" >{{ item.name }}</span>
                            </template>
                        </span>
                    </div>
                </div>
            </van-tab>
            <van-tab title="常用药品">
                <div style="display: flex;height: 500px;">
                    <div class="left">
                        <div class="left-item" v-for="(item, index) in MedicineData" :key="index"
                            :class="activeIndex == index ? 'active' : ''" @click="ongetMedicine((item as any).id, index)"
                            @change="activeIndex = index">
                            {{ item.name }}
                        </div>
                    </div>
                    <div class="right">
                        <span class="span1">
                            <template v-for="(item, index) in MedicineDetailData" :key="index">
                                <dl @click="ondetail2(item.id,item.name)">
                                    <dt>
                                        <!-- <img :src="item.picture" alt=""> -->
                                         <Image :dataSrc="item.picture" alt="" ></Image>
                                    </dt>
                                    <dd>
                                        <span>{{ item.name }}</span>
                                    </dd>
                                </dl>
                            </template>
                        </span>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script setup lang="ts">
import { request } from '@/axios/request';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import homeTop from '@/components/homeTop/index.vue'
import Image from '@/components/image/index.vue'
import { getgord, getgordDetail, getMedicine, getMedicineDetail } from '@/api';
interface TabItem {
  departmentName: string;
  // 根据实际情况添加其他属性
  id: number;
  name: string;
}
interface DepartmentTabItem extends TabItem {
  departmentName: string;
}
interface MedicineTabItem extends TabItem {
  picture: string;
}
const TabsData = ref<DepartmentTabItem[]>([]);
const TabData = ref<DepartmentTabItem[]>([]);
const router = useRouter()


getgord().then(res => {
    // console.log(res, 'getgord');
    TabsData.value = res.data.result
})
// 下标
const activeIndex = ref<number>(0);
// ID
const departmentId = ref(7)

const drugsCategoryId = ref(1)
const page=ref(1)
const count=ref(20)
const config = reactive({
    departmentId: departmentId,
    drugsCategoryId: drugsCategoryId,
    page: page,
    count: count
})
// 点击事件
const ongetgord = (id: any, index: any) => {
    departmentId.value = id
    activeIndex.value = index
    // console.log(departmentId.value, 'departmentIddepartmentId');
    // console.log(activeIndex.value, 'activeIndexactiveIndex');
    TabData.value = []
    getList()
}
// console.log(config.departmentId, 'departmentId');
const getList = () => {
    getgordDetail(config).then(res => {
        TabData.value = res.data.result
        // console.log(TabData.value, 'getgordDetail');
    })
}
getList()
// 常见药品 左侧数据
const MedicineData = ref<MedicineTabItem[]>([]);
getMedicine().then(res => {
    MedicineData.value = res.data.result
    // console.log(res, 'getMedicinegetMedicinegetMedicine');
})
const MedicineDetailData = ref<MedicineTabItem[]>([]);
const getLists = () => {
    getMedicineDetail(config).then(res => {
        MedicineDetailData.value = res.data.result
        console.log(res, 'getMedicineDetailgetMedicineDetailgetMedicineDetail');
    })
}
getLists()
const ongetMedicine=(id:any,index:any)=>{
    activeIndex.value = index
    drugsCategoryId.value = id
    // console.log(activeIndex.value, 'activeIndexactiveIndex');
    // console.log(drugsCategoryId.value, 'drugsCategoryId');
    MedicineDetailData.value = []
    getLists()
}
// 跳转详情页
const ondetail=(id:any,name:any)=>{
    localStorage.setItem('sname', JSON.stringify(name))
router.push(`/diseaseDetail/${id}`)
}
const ondetail2=(id:any,name:any)=>{
    localStorage.setItem('yname', JSON.stringify(name))
    router.push(`/medicineDetail/${id}`)
}
// 点击哪个跳哪个头部tab切
const name = JSON.parse(localStorage.getItem('name') as string)
console.log(name, 'namenamename');
const active = ref(name)

</script>